{% extends 'base.html' %}
{% load static %}

{% block title %}对战统计 - Creeps Judge{% endblock %}

{% block extra_css %}
<style>
    :root {
        --primary-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        --card-bg: linear-gradient(135deg, rgba(45, 55, 85, 0.4) 0%, rgba(35, 45, 75, 0.6) 100%);
        --header-bg: linear-gradient(135deg, rgba(60, 80, 120, 0.6), rgba(50, 70, 110, 0.7));
        --border-color: rgba(120, 140, 200, 0.3);
        --text-primary: rgba(220, 230, 255, 0.95);
        --text-secondary: rgba(160, 180, 220, 0.7);
        --accent-color: rgba(255, 193, 7, 0.9);
        --success-color: rgba(80, 200, 120, 0.8);
        --danger-color: rgba(240, 100, 120, 0.8);
        --warning-color: rgba(255, 193, 7, 0.8);
        --info-color: rgba(0, 212, 255, 0.9);
        --transition-fast: 0.2s ease;
        --transition-normal: 0.3s ease;
        --shadow-light: 0 8px 32px rgba(0, 0, 0, 0.2);
        --shadow-heavy: 0 12px 40px rgba(0, 0, 0, 0.3);
    }

    * {
        box-sizing: border-box;
    }

    body {
        background: var(--primary-bg);
        min-height: 100vh;
        position: relative;
    }

    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:
            radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(100, 150, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
        pointer-events: none;
        z-index: -1;
        will-change: transform;
    }

    .page-header {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(30, 30, 60, 0.9) 100%);
        backdrop-filter: blur(15px);
        color: white;
        padding: 30px 0;
        margin-bottom: 30px;
        text-align: center;
        border-bottom: 2px solid rgba(100, 150, 255, 0.4);
    }

    .page-header h1 {
        font-size: 3rem;
        background: linear-gradient(135deg, #00d4ff, #6496ff, #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1rem;
        text-shadow:
            0 0 5px rgba(0, 212, 255, 0.4),
            0 0 10px rgba(0, 212, 255, 0.3),
            0 0 15px rgba(0, 212, 255, 0.2);
        filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.3));
        font-weight: 600;
    }

    .container {
        background: transparent;
        backdrop-filter: none;
        border-radius: 0;
        padding: 0;
        margin-top: 20px;
        margin-bottom: 20px;
        box-shadow: none;
        border: none;
        color: rgba(255, 255, 255, 0.9);
    }

    /* 页面标题栏 */
    .title-bar {
        background: var(--card-bg);
        backdrop-filter: blur(20px);
        border-radius: 15px;
        border: 1px solid var(--border-color);
        padding: 20px 25px;
        margin-bottom: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow:
            var(--shadow-light),
            0 0 15px rgba(120, 140, 200, 0.1),
            inset 0 0 20px rgba(255, 255, 255, 0.03);
        will-change: transform;
    }

    .title-bar h2 {
        color: var(--text-primary);
        margin: 0;
        font-size: 1.8rem;
        font-weight: 600;
    }

    .title-bar h2 i {
        color: var(--accent-color);
        margin-right: 10px;
    }

    .action-buttons {
        display: flex;
        gap: 10px;
    }

    .btn-modern {
        background: linear-gradient(135deg, rgba(120, 140, 200, 0.15), rgba(100, 120, 180, 0.2));
        border: 1px solid var(--border-color);
        color: rgba(200, 215, 245, 0.9);
        padding: 8px 16px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 0.85rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
        will-change: transform;
    }

    .btn-modern:hover {
        background: linear-gradient(135deg, rgba(120, 140, 200, 0.25), rgba(100, 120, 180, 0.3));
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(120, 140, 200, 0.2);
        color: var(--text-primary);
        text-decoration: none;
    }

    /* 统计卡片网格 */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .stat-card {
        background: var(--card-bg);
        backdrop-filter: blur(20px);
        border-radius: 20px;
        border: 1px solid var(--border-color);
        padding: 25px;
        text-align: center;
        transition: transform var(--transition-normal), box-shadow var(--transition-normal);
        box-shadow:
            var(--shadow-light),
            0 0 15px rgba(120, 140, 200, 0.1),
            inset 0 0 20px rgba(255, 255, 255, 0.03);
        will-change: transform;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow:
            var(--shadow-heavy),
            0 0 20px rgba(120, 140, 200, 0.15),
            inset 0 0 25px rgba(255, 255, 255, 0.05);
    }

    .stat-icon {
        font-size: 2.5rem;
        margin-bottom: 15px;
        display: block;
    }

    .stat-icon.primary { color: rgba(100, 150, 255, 0.9); }
    .stat-icon.success { color: var(--success-color); }
    .stat-icon.danger { color: var(--danger-color); }
    .stat-icon.warning { color: var(--warning-color); }
    .stat-icon.info { color: var(--info-color); }

    .stat-value {
        font-size: 2.2rem;
        font-weight: bold;
        margin-bottom: 8px;
        color: var(--text-primary);
    }

    .stat-label {
        color: var(--text-secondary);
        font-size: 0.9rem;
        margin: 0;
    }

    /* 详细统计区域 */
    .detail-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    .detail-card {
        background: var(--card-bg);
        backdrop-filter: blur(20px);
        border-radius: 20px;
        border: 1px solid var(--border-color);
        overflow: hidden;
        box-shadow:
            var(--shadow-light),
            0 0 15px rgba(120, 140, 200, 0.1),
            inset 0 0 20px rgba(255, 255, 255, 0.03);
        will-change: transform;
    }

    .detail-header {
        background: var(--header-bg);
        color: var(--text-primary);
        padding: 15px 20px;
        border-bottom: 1px solid rgba(120, 140, 200, 0.2);
    }

    .detail-header h6 {
        margin: 0;
        font-weight: 600;
        font-size: 1rem;
    }

    .detail-header i {
        color: var(--accent-color);
        margin-right: 8px;
    }

    .detail-body {
        padding: 25px;
    }

    .detail-stats-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        text-align: center;
    }

    .detail-stat-item h3 {
        margin: 0 0 5px 0;
        font-weight: bold;
        font-size: 1.8rem;
    }

    .detail-stat-item p {
        color: var(--text-secondary);
        margin: 0;
        font-size: 0.85rem;
    }

    .detail-stat-item.primary h3 { color: rgba(100, 150, 255, 0.9); }
    .detail-stat-item.warning h3 { color: var(--warning-color); }
    .detail-stat-item.info h3 { color: var(--info-color); }

    /* 进度条 */
    .progress-modern {
        height: 20px;
        background: rgba(120, 140, 200, 0.15);
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid rgba(120, 140, 200, 0.2);
        margin-bottom: 10px;
    }

    .progress-bar-modern {
        height: 100%;
        background: linear-gradient(90deg, var(--success-color), rgba(60, 180, 100, 0.9));
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 0.8rem;
        transition: width var(--transition-normal);
        will-change: width;
    }

    .progress-0 { width: 0%; }
    .progress-10 { width: 10%; }
    .progress-20 { width: 20%; }
    .progress-30 { width: 30%; }
    .progress-40 { width: 40%; }
    .progress-50 { width: 50%; }
    .progress-60 { width: 60%; }
    .progress-70 { width: 70%; }
    .progress-80 { width: 80%; }
    .progress-90 { width: 90%; }
    .progress-100 { width: 100%; }

    /* 连胜统计 */
    .streak-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 30px;
    }

    /* 最近对战记录 */
    .recent-battles-card {
        background: var(--card-bg);
        backdrop-filter: blur(20px);
        border-radius: 20px;
        border: 1px solid var(--border-color);
        overflow: hidden;
        box-shadow:
            var(--shadow-light),
            0 0 15px rgba(120, 140, 200, 0.1),
            inset 0 0 20px rgba(255, 255, 255, 0.03);
        will-change: transform;
    }

    .recent-battles-header {
        background: var(--header-bg);
        color: var(--text-primary);
        padding: 20px 25px;
        border-bottom: 1px solid rgba(120, 140, 200, 0.2);
    }

    .recent-battles-header h6 {
        margin: 0;
        font-weight: 600;
        font-size: 1.1rem;
    }

    .recent-battles-header i {
        color: var(--accent-color);
        margin-right: 8px;
    }

    .battles-table {
        width: 100%;
        border-collapse: collapse;
    }

    .battles-table thead th {
        background: var(--header-bg);
        color: var(--text-primary);
        padding: 15px 20px;
        font-weight: 600;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 1px solid rgba(120, 140, 200, 0.2);
        border: none;
    }

    .battles-table tbody tr {
        background: rgba(255, 255, 255, 0.02);
        border-bottom: 1px solid rgba(120, 140, 200, 0.15);
        transition: background var(--transition-fast), transform var(--transition-fast), border-left var(--transition-fast);
        will-change: transform;
    }

    .battles-table tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.01);
    }

    .battles-table tbody tr:hover {
        background: rgba(120, 140, 200, 0.08);
        transform: translateX(3px);
        border-left: 3px solid rgba(120, 140, 200, 0.4);
    }

    .battles-table tbody td {
        padding: 15px 20px;
        color: rgba(200, 215, 245, 0.9);
        border: none;
        vertical-align: middle;
    }

    .battle-id {
        background: rgba(120, 140, 200, 0.15);
        color: rgba(200, 215, 245, 0.9);
        padding: 4px 8px;
        border-radius: 6px;
        font-family: 'Courier New', monospace;
        font-size: 0.85rem;
        border: 1px solid var(--border-color);
        margin-right: 8px;
    }

    .mode-tag {
        font-size: 0.75rem;
        font-weight: bold;
        padding: 2px 6px;
        border-radius: 12px;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        margin-left: 5px;
        display: inline-block;
    }

    .mode-tag.ranked {
        background: linear-gradient(45deg, #ff6b35, #f7931e);
        color: white;
        border: 2px solid rgba(255, 107, 53, 0.6);
        box-shadow: 0 0 15px rgba(255, 107, 53, 0.4);
    }

    .mode-tag.practice {
        background: linear-gradient(45deg, #28a745, #20c997);
        color: white;
        border: 2px solid rgba(40, 167, 69, 0.6);
        box-shadow: 0 0 15px rgba(40, 167, 69, 0.4);
    }

    .mode-tag.friend {
        background: linear-gradient(45deg, #6f42c1, #e83e8c);
        color: white;
        border: 2px solid rgba(111, 66, 193, 0.6);
        box-shadow: 0 0 15px rgba(111, 66, 193, 0.4);
    }

    .mode-tag.unknown {
        background: linear-gradient(45deg, #6c757d, #495057);
        color: white;
        border: 2px solid rgba(108, 117, 125, 0.6);
        box-shadow: 0 0 15px rgba(108, 117, 125, 0.4);
    }

    .mode-tag:hover {
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .badge-self-battle {
        background: linear-gradient(135deg, #9c27b0, #673ab7);
        color: white;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 0 10px rgba(156, 39, 176, 0.3);
        margin-left: 5px;
        display: inline-block;
        transition: all 0.3s ease;
    }

    .badge-self-battle:hover {
        transform: translateY(-1px) scale(1.05);
        box-shadow: 0 2px 8px rgba(156, 39, 176, 0.4);
    }

    .result-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 12px;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.85rem;
    }

    .result-badge.win {
        background: linear-gradient(135deg, var(--success-color), rgba(60, 180, 100, 0.9));
        color: white;
        box-shadow: 0 0 15px rgba(80, 200, 120, 0.3);
    }

    .result-badge.loss {
        background: linear-gradient(135deg, var(--danger-color), rgba(220, 80, 100, 0.9));
        color: white;
        box-shadow: 0 0 15px rgba(240, 100, 120, 0.3);
    }

    .result-badge.draw {
        background: linear-gradient(135deg, var(--warning-color), rgba(255, 152, 0, 0.8));
        color: white;
        box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
    }

    .result-badge.pending {
        background: linear-gradient(135deg, #95a5a6, #7f8c8d);
        color: white;
        box-shadow: 0 0 15px rgba(149, 165, 166, 0.3);
    }

    .result-badge.running {
        background: linear-gradient(135deg, #3498db, #2980b9);
        color: white;
        box-shadow: 0 0 15px rgba(52, 152, 219, 0.3);
    }

    .result-badge.error {
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        color: white;
        box-shadow: 0 0 15px rgba(231, 76, 60, 0.3);
    }

    .score-badge {
        background: rgba(120, 140, 200, 0.15);
        color: rgba(200, 215, 245, 0.9);
        padding: 4px 8px;
        border-radius: 8px;
        font-weight: 600;
        border: 1px solid var(--border-color);
    }

    .time-text {
        color: var(--text-secondary);
        font-size: 0.85rem;
    }

    .btn-detail {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.15), rgba(80, 130, 235, 0.2));
        border: 1px solid rgba(100, 150, 255, 0.3);
        color: rgba(180, 200, 255, 0.9);
        padding: 6px 12px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 0.8rem;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
        will-change: transform;
    }

    .btn-detail:hover {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.25), rgba(80, 130, 235, 0.3));
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(100, 150, 255, 0.2);
        color: rgba(200, 220, 255, 0.95);
        text-decoration: none;
    }

    /* 空状态 */
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: var(--text-secondary);
    }

    .empty-state i {
        font-size: 4rem;
        margin-bottom: 20px;
        color: rgba(120, 140, 200, 0.4);
    }

    .empty-state h4 {
        margin-bottom: 10px;
        color: var(--text-primary);
    }

    .empty-state p {
        margin-bottom: 30px;
        font-size: 0.95rem;
    }

    .btn-create {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.8), rgba(80, 130, 235, 0.9));
        border: none;
        color: white;
        padding: 12px 24px;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: background var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
        box-shadow: 0 4px 15px rgba(100, 150, 255, 0.3);
        will-change: transform;
    }

    .btn-create i {
        font-size: 1.1rem;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-create:hover {
        background: linear-gradient(135deg, rgba(120, 170, 255, 0.9), rgba(100, 150, 255, 1));
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(100, 150, 255, 0.4);
        color: white;
        text-decoration: none;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .title-bar {
            flex-direction: column;
            gap: 15px;
            text-align: center;
        }

        .action-buttons {
            justify-content: center;
        }

        .stats-grid {
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
        }

        .detail-stats {
            grid-template-columns: 1fr;
        }

        .streak-stats {
            grid-template-columns: 1fr;
        }

        .battles-table {
            font-size: 0.85rem;
        }

        .battles-table thead th,
        .battles-table tbody td {
            padding: 10px 15px;
        }
    }

    @media (max-width: 480px) {
        .stats-grid {
            grid-template-columns: 1fr;
        }

        .battles-table {
            font-size: 0.8rem;
        }

        .battles-table thead th,
        .battles-table tbody td {
            padding: 8px 10px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- 页面标题栏 -->
    <div class="title-bar">
        <h2><i class="fas fa-chart-bar"></i> 我的对战统计</h2>
        <div class="action-buttons">
            <a href="{% url 'battles:battle_ranking' %}" class="btn-modern">
                <i class="fas fa-trophy"></i> 排行榜
            </a>
            <a href="{% url 'battles:battle_list' %}" class="btn-modern">
                <i class="fas fa-list"></i> 对战列表
            </a>
        </div>
    </div>

    <!-- 统计概览 -->
    <div class="stats-grid">
        <div class="stat-card">
            <i class="stat-icon primary fas fa-sword-cross"></i>
            <div class="stat-value">{{ stats.total_battles }}</div>
            <p class="stat-label">总对战数</p>
        </div>
        <div class="stat-card">
            <i class="stat-icon success fas fa-trophy"></i>
            <div class="stat-value">{{ stats.wins }}</div>
            <p class="stat-label">胜利次数</p>
        </div>
        <div class="stat-card">
            <i class="stat-icon danger fas fa-skull"></i>
            <div class="stat-value">{{ stats.losses }}</div>
            <p class="stat-label">失败次数</p>
        </div>
        <div class="stat-card">
            <i class="stat-icon warning fas fa-handshake"></i>
            <div class="stat-value">{{ stats.draws }}</div>
            <p class="stat-label">平局次数</p>
        </div>
    </div>

    <!-- 详细统计 -->
    <div class="detail-stats">
        <div class="detail-card">
            <div class="detail-header">
                <h6><i class="fas fa-percentage"></i> 胜率统计</h6>
            </div>
            <div class="detail-body">
                <div class="detail-stats-row">
                    <div class="detail-stat-item primary">
                        <h3>{{ win_rate|floatformat:1 }}%</h3>
                        <p>总胜率</p>
                    </div>
                    <div>
                        <div class="progress-modern">
                            <div class="progress-bar-modern progress-{% if win_rate %}{{ win_rate|floatformat:0 }}{% else %}0{% endif %}">
                                {{ win_rate|floatformat:0|default:0 }}%
                            </div>
                        </div>
                        <small class="stat-label">胜率进度</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="detail-card">
            <div class="detail-header">
                <h6><i class="fas fa-star"></i> 评分信息</h6>
            </div>
            <div class="detail-body">
                <div class="detail-stats-row">
                    <div class="detail-stat-item warning">
                        <h3>{{ stats.rating }}</h3>
                        <p>当前评分</p>
                    </div>
                    <div class="detail-stat-item info">
                        <h3>{{ stats.highest_rating }}</h3>
                        <p>历史最高</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 详细战斗统计 -->
    {% if detailed_stats %}
    <div class="detail-stats">
        <div class="detail-card">
            <div class="detail-header">
                <h6><i class="fas fa-sword"></i> 战斗数据统计</h6>
            </div>
            <div class="detail-body">
                <div class="detail-stats-row">
                    <div class="detail-stat-item success">
                        <h3>{{ detailed_stats.total_kills }}</h3>
                        <p>总击杀数</p>
                    </div>
                    <div class="detail-stat-item danger">
                        <h3>{{ detailed_stats.total_deaths }}</h3>
                        <p>总死亡数</p>
                    </div>
                    <div class="detail-stat-item primary">
                        <h3>{{ kd_ratio|floatformat:2 }}</h3>
                        <p>击杀死亡比</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="detail-card">
            <div class="detail-header">
                <h6><i class="fas fa-heart"></i> 伤害与治疗统计</h6>
            </div>
            <div class="detail-body">
                <div class="detail-stats-row">
                    <div class="detail-stat-item warning">
                        <h3>{{ detailed_stats.total_damage_dealt|floatformat:0 }}</h3>
                        <p>总伤害输出</p>
                    </div>
                    <div class="detail-stat-item info">
                        <h3>{{ detailed_stats.total_damage_received|floatformat:0 }}</h3>
                        <p>总承受伤害</p>
                    </div>
                    <div class="detail-stat-item success">
                        <h3>{{ detailed_stats.total_healing|floatformat:0 }}</h3>
                        <p>总治疗量</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="detail-card">
            <div class="detail-header">
                <h6><i class="fas fa-cogs"></i> 操作与资源统计</h6>
            </div>
            <div class="detail-body">
                <div class="detail-stats-row">
                    <div class="detail-stat-item danger">
                        <h3>{{ detailed_stats.total_command_fail_count }}</h3>
                        <p>指令失败次数</p>
                    </div>
                    <div class="detail-stat-item warning">
                        <h3>{{ detailed_stats.total_rmb }}</h3>
                        <p>总资源(RMB)</p>
                    </div>
                    <div class="detail-stat-item info">
                        <h3>{{ detailed_stats.average_base_health|floatformat:0 }}</h3>
                        <p>平均基础生命值</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- 连胜统计 -->
    <div class="streak-stats">
        <div class="stat-card">
            <i class="stat-icon danger fas fa-fire"></i>
            <div class="stat-value">{{ stats.current_streak }}</div>
            <p class="stat-label">当前连胜</p>
        </div>
        <div class="stat-card">
            <i class="stat-icon warning fas fa-crown"></i>
            <div class="stat-value">{{ stats.longest_streak }}</div>
            <p class="stat-label">最长连胜</p>
        </div>
        <div class="stat-card">
            <i class="stat-icon success fas fa-medal"></i>
            <div class="stat-value">{{ stats.total_score }}</div>
            <p class="stat-label">总积分</p>
        </div>
    </div>

    <!-- 最近对战记录 -->
    {% if recent_battles %}
    <div class="recent-battles-card">
        <div class="recent-battles-header">
            <h6><i class="fas fa-history"></i> 最近对战记录</h6>
        </div>
        <div class="table-container">
            <table class="battles-table">
                <thead>
                    <tr>
                        <th>对战ID</th>
                        <th>对手</th>
                        <th>结果</th>
                        <th>比分</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for battle in recent_battles %}
                    <tr>
                        <td>
                            <span class="battle-id">#{{ battle.id }}</span>
                            {% if battle.battle_type == 'ranked' %}
                                <span class="mode-tag ranked">排位</span>
                            {% elif battle.battle_type == 'practice' %}
                                <span class="mode-tag practice">练习</span>
                            {% else %}
                                <span class="mode-tag unknown">未知</span>
                            {% endif %}
                            {% if battle.player1 == battle.player2 %}
                                <span class="badge-self-battle">自我对战</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if battle.player1 == request.user %}
                                <span class="text-muted">vs</span> {{ battle.player2.username }}
                            {% else %}
                                <span class="text-muted">vs</span> {{ battle.player1.username }}
                            {% endif %}
                        </td>
                        <td>
                            {% if battle.status == 'finished' %}
                                {% if battle.result == 'player1_win' %}
                                    {% if battle.player1 == request.user %}
                                        <span class="result-badge win"><i class="fas fa-trophy"></i> 胜利</span>
                                    {% else %}
                                        <span class="result-badge loss"><i class="fas fa-skull"></i> 失败</span>
                                    {% endif %}
                                {% elif battle.result == 'player2_win' %}
                                    {% if battle.player2 == request.user %}
                                        <span class="result-badge win"><i class="fas fa-trophy"></i> 胜利</span>
                                    {% else %}
                                        <span class="result-badge loss"><i class="fas fa-skull"></i> 失败</span>
                                    {% endif %}
                                {% elif battle.result == 'draw' %}
                                    <span class="result-badge draw"><i class="fas fa-handshake"></i> 平局</span>
                                {% endif %}
                            {% elif battle.status == 'pending' %}
                                <span class="result-badge pending"><i class="fas fa-clock"></i> 等待中</span>
                            {% elif battle.status == 'running' %}
                                <span class="result-badge running"><i class="fas fa-play"></i> 进行中</span>
                            {% elif battle.status == 'error' %}
                                <span class="result-badge error"><i class="fas fa-exclamation-triangle"></i> 错误</span>
                            {% endif %}
                        </td>
                        <td>
                            <span class="score-badge">{{ battle.player1_score }} : {{ battle.player2_score }}</span>
                        </td>
                        <td>
                            {% if battle.finished_at %}
                                <span class="time-text">{{ battle.finished_at|date:"m-d H:i" }}</span>
                            {% else %}
                                <span class="time-text">{{ battle.created_at|date:"m-d H:i" }}</span>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{% url 'battles:battle_detail' battle.id %}" class="btn-detail">
                                <i class="fas fa-eye"></i> 详情 & 回放
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div style="text-align: center; padding: 20px;">
            <a href="{% url 'battles:battle_list' %}" class="btn-modern">
                <i class="fas fa-list"></i> 查看全部对战记录
            </a>
        </div>
    </div>
    {% else %}
    <div class="recent-battles-card">
        <div class="empty-state">
            <i class="fas fa-chart-line"></i>
            <h4>还没有对战记录</h4>
            {% if not user.is_staff %}
                {% if battle_creation_enabled %}
                    <p>开始您的第一场对战，建立您的战绩！</p>
                    <a href="{% url 'battles:battle_create' %}" class="btn-create">
                        <i class="fas fa-plus"></i> 创建对战
                    </a>
                {% else %}
                    <p>创建对战功能暂时不可用</p>
                    <button class="btn-create disabled" onclick="showFeatureDisabledAlert()" title="点击查看详情">
                        <i class="fas fa-plus"></i> 创建对战
                    </button>
                {% endif %}
            {% else %}
                <p>管理员账号不参与对战统计</p>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

<script>
    // 显示功能禁用提示
    function showFeatureDisabledAlert() {
        alert('创建对战功能已被管理员暂时关闭。\n\n如有疑问，请联系系统管理员。');
    }
</script>
{% endblock %}